<template>
	<div class="ktsh-container">
		<img v-if="questionImg" :src="questionImg" class="topic-img" />
		<div class="ktsh-body">
			<div class="item-list">
				<div>
					<text>时间：</text>
					<div class="info">
						<input v-if="props.showInput" :disabled="!props.isStart" @input="change" v-model="field.time" type="text" :maxlength="20">
						<template v-else>{{ field.time }}</template>
					</div>
				</div>
				<div>
					<text>地点：</text>
					<div class="info">
						<input v-if="props.showInput" :disabled="!props.isStart" @input="change" v-model="field.location" type="text" :maxlength="20">
						<template v-else>{{ field.location }}</template>
					</div>
				</div>
				<div>
					<text>人物：</text>
					<div class="info">
						<input v-if="props.showInput" :disabled="!props.isStart" @input="change" v-model="field.people" type="text" :maxlength="20">
						<template v-else>{{ field.people }}</template>
					</div>
				</div>
				<div>
					<text>事情：</text>
					<div class="info">
						<input v-if="props.showInput" :disabled="!props.isStart" @input="change" v-model="field.thing" type="text" :maxlength="20">
						<template v-else>{{ field.thing }}</template>
					</div>
				</div>
				<div>
					<text>心情：</text>
					<div class="info">
						<input v-if="props.showInput" :disabled="!props.isStart" @input="change" v-model="field.mood" type="text" :maxlength="20">
						<template v-else>{{ field.mood }}</template>
					</div>
				</div>
			</div>
			<div class="ktsh-content">
				<div class="content-pre" style="background: linear-gradient(#fff 98%, #7c808c 98%);background-size: 100% 4rem;">{{ field.content }}</div>
			</div>
		</div>
	</div> 
</template>

<script setup>
import { onMounted, reactive, ref } from "vue"
import { getStaticUrl, urlImageToBase64 } from "@/utils"
import Props from "../props.js"
const props = defineProps(Props)
const emit = defineEmits(['answer'])
let field = reactive({"time":"","location":"","people":"","thing":"","mood":"", "content": ""})
const change = () => {
	console.log(111, field)
	emit('answer', field)
}

const questionImg = ref('')

onMounted(() => {
	if(!props.showInput) {
		const result = props.result
		field.time = result.time
		field.location = result.location
		field.people = result.people
		field.thing = result.thing
		field.mood = result.mood
		field.content = result.content
	}
})


const getImageFile = () => {
	const qImgUrl = getStaticUrl(props.data.images)
	return new Promise((resolve, reject)=>{ 
		// 问题图片
		urlImageToBase64(qImgUrl).then(qimg => {
			questionImg.value = qimg
			resolve()
		}).catch(() => {
			reject()
		})
	})
}

defineExpose({ getImageFile })




</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.ktsh-container {
	padding: 0 1.7rem;
	.topic-img {
		width: 80%;
		display: block;
		margin: auto;
	}
}
.ktsh-body {
	padding-top: 3rem;
	.item-list {
		display: flex;
		flex-wrap: wrap;
		font-size: 1.2rem;
		align-items: center;
		> div {
			display: flex;
			width: 33.33333%;
			box-sizing: border-box;
			padding: 1.2rem 0.6rem 1.2rem 0;
			align-items: center;
		}
		.info {
			flex: 1;
			border-bottom: 1px solid $gray-ligh-2;
			padding: 0.4rem 0;
		}
		input {
			width: 100%;
			padding: 0;
			margin: 0;
			border: none;
			outline: none;
		}
	}
}
.ktsh-content {
	textarea,
	.content-pre{
		width: 100%;
		padding: 0;
		margin: 0;
		border: none;
		outline: none;
		min-height: 25rem;
		font-size: 1.4rem;
		line-height: 4rem;
		box-sizing: border-box;
	}
	.content-pre {
		padding-right: 1.6rem;
		white-space: pre-line;
		word-break: break-word;
	}
}
</style>